<template>
  <q-card class="tool-card" flat>
    <q-card-section class="row">
      <q-card-section class="q-my-auto q-px-xs">
        <q-avatar size="80px" square rounded class="cursor-pointer" color="primary" @click="goDetail({ location: {module: 'apps', page: 'tool', element: 'tool-avatar', event: 'click'},
       action: 'open-tool-detail',
        value: {id: data._id} })">
          <img v-if="data.icon" :src="data.icon" alt="">
          <img v-else src="../../../public/logo/logo-51tixiao.png" alt="">
        </q-avatar>
      </q-card-section>

      <q-card-section class="q-my-auto q-pl-xs col">
        <div class="text-subtitle1 text-weight-bold text-left q-pt-none">
          <div class="card-title q-pt-none">
            <span>{{ data.name }}</span>
            <q-icon class="q-ml-sm cursor-pointer" name="open_in_new"
                    @click="openLink({appData: data, id: data._id}, {module: 'apps', page: 'tool', element: 'open-icon', event: 'click'})">
              <q-tooltip content-class="bg-primary" :offset="[10, 10]">点击跳转页面</q-tooltip>
            </q-icon>
          </div>
        </div>
        <div class="cursor-pointer" @click="goDetail({ location: {module: 'apps', page: 'tool', element: 'tool-box', event: 'click'},
       action: 'open-tool-detail',
        value: {id: data._id} })">
          <div class="text-left q-mb-sm card-description ellipsis col" style="height:21px">{{ data.description }}</div>
          <div class="text-left q-mt-sm">
            <tool-tag-chip class="text-overline" v-for="tag in data.tags" :key="tag._id" :tag="tag">
            </tool-tag-chip>

            <!-- <q-chip size="sm">点赞: {{ data.statistics.likeCount }}</q-chip> -->
            <!-- <q-chip size="sm">收藏: {{ data.statistics.collectionCount }}</q-chip> -->
            <!-- <q-chip size="sm">分享: {{ data.statistics.forwardCount }}</q-chip> -->
            <q-chip size="sm">
              <q-icon name="visibility" class="q-mr-xs"></q-icon>
              {{ data.statistics.clickCount }}
            </q-chip>
            <q-btn :loading="collectionLoading" flat color="secondary" icon="bookmark"
                   :label="data.isCollection?'已在工作':'添加至工作台'"
                   @click.stop="handleCollection(data)">
              <q-tooltip anchor="top middle" v-if="!data.isCollection" content-class="bg-primary" :offset="[0, 30]">
                <span>点击可以加入个人收藏</span>
              </q-tooltip>
              <q-tooltip anchor="top middle" v-if="data.isCollection" content-class="bg-primary" :offset="[10, 30]">
                <span>已经收藏过咯，可以去个人空间看一下~</span>
              </q-tooltip>
            </q-btn>
            <div class="block full-width"/>
          </div>
        </div>

      </q-card-section>

      <q-card-section class="q-my-auto q-px-xs">
        <div class="vote-square" :class="{voted: like}">
          <q-btn stack flat unelevated :loading='likeLoading'
                 :icon="like ? 'thumb_up_alt' : 'thumb_up_off_alt'"
                 class="vote"
                 :class="{voted: like}"
                 size="md"
                 :label="data.statistics.likeCount"
                 @click.stop="handleLike"
          />
        </div>
      </q-card-section>
      <!-- <q-separator></q-separator> -->
    </q-card-section>
    <q-inner-loading :showing="isLoading">
      <q-spinner-gears size="50px" color="primary"/>
    </q-inner-loading>
  </q-card>
</template>

<script>
// eslint-disable-next-line import/named
import ToolTagChip from './ToolTagChip.vue'
import AppActivityMixin from 'src/mixins/app-activity'

export default {
  name: 'ToolCard',
  mixins: [AppActivityMixin],
  components: {
    ToolTagChip
  },
  props: {
    data: Object,
    textColor: {
      type: String,
      default: 'white'
    }
  },
  data () {
    return {
      isLoading: false,
      pageUrl: '',
      like: this.data.isLike,
      likeLoading: false,
      collectionLoading: false
    }
  },
  methods: {
    async handleLike () {
      this.likeLoading = true
      if (this.like) {
        await this.$store.dispatch('tool/popToolLike', this.data)
      } else {
        await this.$store.dispatch('tool/addToolLike', this.data)
      }
      //
      this.like = !this.like
      this.likeLoading = false
    },
    async goDetail (log) {
      if (!this.data) return
      this.isLoading = true
      await this.$router.push({
        name: 'AppDetail',
        params: {
          toolId: this.data._id
        },
        query: this.$route.query
      })
      this.isLoading = false
      await this.log1(log)
    },
    async handleCollection (tool) {
      try {
        this.collectionLoading = true
        if (tool.isCollection) {
          await this.$store.dispatch('tool/removeToolCollection', this.data)
        } else {
          await this.$store.dispatch('tool/addToolCollection', this.data)
        }
      } finally {
        this.collectionLoading = false
      }
    }
  }
}
</script>

<style lang="scss">
:root {
  --color1: rgb(0, 231, 255);
  --color2: rgb(255, 0, 231);
}

.tool-card {
  display: block;
  background-size: 100%;
  background-color: white;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  transform-origin: center;
  border-radius: 0;
  // border: 0.5px solid #fafbff;
  // transform: translate3d(0, 0, 0px);
  // transition: all 0.3s;

}

.tool-card:hover {
  background-color: rgba($c3, 0.08);
}

// .tool-card.cool-halo {
//   box-shadow: -13px -13px 13px -15px var(--color1),
//   13px 13px 13px -15px var(--color2),
//   0 0 4px 2px rgba(105, 82, 82, 0.5),
//   0 35px 25px -15px rgba(0, 0, 0, 0.3);
// }

.tool-card:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  // opacity: .1;
  mix-blend-mode: screen;
  background-repeat: no-repeat;
  user-select: none;
  pointer-events: none;
  // border: 1px solid #fafbff;
}

.vote-square {
  border: 0.5px solid;
  border-color: #e0e0e0;
}

.vote {
  font-size: 16px;
  width: 64px;
  height: 64px;
  color: #aaaaaa;

}

.voted {
  color: $c3;
  border-color: $c3
}

</style>
